<#-- @ftlvariable name="replyList" type="java.util.List<com.xci.platform.auth.entity.ReplyEntity>" -->
<#-- @ftlvariable name="entity" type="com.xci.platform.auth.entity.FeedbackEntity" -->
<#-- @ftlvariable name="authUser" type="com.xci.platform.auth.core.AuthUser" -->
<#include "/_inc/_layout.ftl">
<#assign allowReply=helper.isAuthorize("SystemFeedback.Reply")/>
<@header>
    <style>
        dd, dt {
            line-height: 1.53846154
        }

        .dl-inline {
            margin: 0
        }

        .dl-inline dd {
            display: inline-block;
            padding-right: 1em
        }

        .base-info {
            color: #686868;
        }

        .feedback-info {
            color: red;
        }
        .reply-info {
            color: green;
        }

        .threadstamp img {
            position: absolute;
            top: 10px;
            right: 50px;
        }

    </style>
</@header>
<#if entity.status==1>
    <div class="threadstamp"><img src="<@html.url '/auth/img/status-finish.png'/>"></div>
</#if>
<div class="jxpanel jx-overflow winpanel" data-options="fit:true">
    <table id="basic" class="table table-bordered jxtable-details">
        <tr>
            <td><h4>${entity.title!?html}</h4></td>
        </tr>
        <tr>
            <td>
                <dl class="dl-inline base-info feedback-info">
                    <dd data-toggle="tooltip" data-placement="top"
                        data-original-title="反馈时间：<strong>${helper.formatDateTime(entity.operateDateTime)!?html}</strong> ">
                        <i class="icon-clock"></i> ${helper.formatDateTime(entity.operateDateTime)!?html}
                    </dd>
                    <dd data-toggle="tooltip" data-placement="top"
                        data-original-title="反馈者：<strong>${entity.operateUserName!?html}</strong> ">
                        <i class="icon-user"></i> ${entity.operateUserName!?html}
                    </dd>
                    <dd data-toggle="tooltip" data-placement="top" data-original-title="反馈类型：<strong>${entity.category!?html}</strong> ">
                        <i class="icon-tag"></i> ${entity.category!?html}
                    </dd>
                    <dd data-toggle="tooltip" data-placement="top" data-original-title="状态：<strong>${entity.statusText!?html}</strong> ">
                        <i class="icon-flag"></i> ${entity.statusText!?html}
                    </dd>
                </dl>
            </td>
        </tr>
        <tr>
            <td>${entity.feedbackContent!}</td>
        </tr>
            <#if (replyList?size>0)>
                <tr>
                    <td>
                        <div class="jxsection-container">回复列表</div>
                    </td>
                </tr>
            </#if>
            <#list replyList as item >
            <#assign isSelf = item.operateUserId==entity.operateUserId/>
                <tr>
                    <td>
                        <div class="jxsection-container">
                            <dl class="dl-inline base-info <@html.iif value = isSelf trueMsg = "feedback-info" falseMsg = "reply-info"/>">
                                <dd data-toggle="tooltip" data-placement="top"
                                    data-original-title="回复时间：<strong>${helper.formatDateTime(item.operateDateTime)!?html}</strong> ">
                                    <i class="icon-clock"></i> ${helper.formatDateTime(item.operateDateTime)!?html}
                                </dd>
                                <dd data-toggle="tooltip" data-placement="top"
                                    data-original-title="回复者：<strong>${item.operateUserName!?html}</strong> ">
                                    <i class="icon-user"></i> ${item.operateUserName!?html}
                                </dd>
                                <#if !isSelf>
                                    <dd data-toggle="tooltip" data-placement="top">
                                        <i class="icon-check"></i> 官方回复
                                    </dd>
                                </#if>
                            </dl>
                        </div>
                        ${item.replyContent!}
                    </td>
                </tr>
            </#list>
        <#if entity.status==0 && (allowReply || entity.operateUserId==authUser.userId)>
            <tr>
                <td>
                    <div class="jxsection-container">回复</div>
                </td>
            </tr>
            <tr>
                <td>
                    <textarea id="replyContent" name="replyContent"></textarea>
                </td>
            </tr>
        </#if>
    </table>
    <@html.echo test=(allowReply||entity.operateUserId==authUser.userId)>
        <div class="panel-footer text-right">
            <button id="btnReply" class="btn btn-primary" type="button">
                <i class="fa fa-save"></i> 回复
            </button>
            <button id="btnCancel" class="btn btn-default" type="button" onclick="jx.closeDialog()">
                <i class="fa fa-sign-in"></i> 取消
            </button>
        </div>
    </@html.echo>
</div>
<@footer>
    <@html.ueScript/>
    <script>
        function initUEditor() {
            if(document.getElementById('replyContent')){
                var ops = $.extend({}, jx.auth.simpleUEOptions(), {initialFrameHeight: 300, serverUrl: '<@html.ueditorServerUrl/>'});
                UE.getEditor('replyContent', ops);
            }
        }

        //回复反馈
        function reply (feedbackId) {
            var editor = UE.getEditor('replyContent');
            var content = editor.getPlainTxt().trim();
            if (content == '') {
                jx.toastr.error('请输入回复内容', '', {
                    progressBar: true,
                    closeButton: false,
                    timeOut: 10000,
                    positionClass: 'toast-top-center'
                });

                $('.jxpanel').animate({
                    scrollTop: $(document.body).height()+500
                }, 'slow');
                editor.focus();
                return false;
            }
            jx.ajax({
                url: jx.apiUrl('/auth/feedback/replysave'),
                type: 'post',
                data: {feedbackId: feedbackId, replyContent: editor.getContent()},
                maskMsg: '正在回复...',
                success: function (result) {
                    if (result.success) {
                        jx.alert('回复成功', function (index) {
                            jx.closeDialog(index);
                            window.location.reload();
                        });
                    }
                    else if (!result.msg) {
                        jx.alert(result.msg);
                    }
                }
            });
        }

        $('[data-toggle="tooltip"]').tooltip({
            html: true
        });

        $('#btnReply').click(function () {
            reply('${entity.id}');
        });

        initUEditor();
    </script>
</@footer>